<template>
	<view class="f26r col333 minH100v poRel">
		<navbar background="background-image: linear-gradient(to right, #2c6739, #99c043);"
			title="用户信息" back @onBack="goBack"
		></navbar>
		<view class="disFlex h80r backColWhite aliItCenter pl20r pr20r borB1SE9e9e9">
			<view class="w240r">
				头像（可更换）
			</view>
			<view class="flex1 teAliRight">
				<image :src="token ?
					(avatarUrl ? avatarUrl : baseUrl + 'iconHeadPortrait.png')
					:
					(baseUrl + 'iconHeadGray.png')"
					class="w60r h60r poRel top4r" mode="aspectFit"
					@click="cliBannerImg"
				></image>
			</view>
		</view>
		<view class="disFlex h80r backColWhite aliItCenter pl20r pr20r borB1SE9e9e9">
			<view class="w240r">
				昵称（可自定义）
			</view>
			<view class="flex1 pl20r pr20r">
				<input type="nickname" :value="userInfo.nickname"
					@input="bindinput" @blur="bindblur"
					 placeholder="请输入昵称"
					class="wPer100 teAliRight f26r"
				>
			</view>
			<view class="">
				<button class="f26r colFff backCol99c043 w140r notBtnSty p0"
					@click="subName"
				>
					提交昵称
				</button>
			</view>
		</view>
		<view class="disFlex h80r backColWhite aliItCenter pl20r pr20r borB1SE9e9e9">
			<view class="w240r">
				手机号
			</view>
			<view class="flex1 teAliRight col999">
				{{userInfo.phone}}
			</view>
		</view>
		<view class="disFlex h80r backColWhite aliItCenter pl20r pr20r borB1SE9e9e9">
			<view class="w240r">
				邀请奖励余额
			</view>
			<view class="flex1 teAliRight colFf3627">
				¥{{userInfo.amount}}
			</view>
		</view>
		<view class="disFlex h80r backColWhite aliItCenter pl20r pr20r borB1SE9e9e9">
			<view class="w240r">
				邀请码
			</view>
			<view class="flex1 teAliRight col999">
				{{userInfo.invitation_code}}
			</view>
		</view>
		<view class="disFlex h80r backColWhite aliItCenter pl20r pr20r borB1SE9e9e9">
			<view class="w240r">
				我的上级邀请人
			</view>
			<view class="flex1 teAliRight col999">
				{{userInfo.inviter == '999999' ? '无' : userInfo.inviter}}
			</view>
		</view>
		<view class="disFlex h80r backColWhite aliItCenter pl20r pr20r borB1SE9e9e9">
			<view class="w240r">
				我的上上级邀请人
			</view>
			<view class="flex1 teAliRight col999">
				{{
					userInfo.inviter2 == '999999' ? '无' : userInfo.inviter2
				}}
			</view>
		</view>
		<view class="disFlex h80r backColWhite aliItCenter pl20r pr20r borB1SE9e9e9">
			<view class="w240r">
				id
			</view>
			<view class="flex1 teAliRight col999">
				{{userInfo.id}}
			</view>
		</view>
		<view class="disFlex h80r backColWhite aliItCenter pl20r pr20r borB1SE9e9e9">
			<view class="w240r">
				注册时间
			</view>
			<view class="flex1 teAliRight col999">
				{{userInfo.date}}
			</view>
		</view>
		<view @click="cliOutLogin"
			class="poAbs bom30r left20r backColWhite w710r lh80r teAliCenter borRad10r colBa2f28 bor1SBa2f28"
		>
			退出当前账号
		</view>
	</view>
</template>
<script>
import navbar from '@/components/navbar.vue'
import { imgNetUrl, baseUrl } from '@/utils/request.js'
import { getMemberlist, bindAvatarName } from '@/utils/api.js'
import { resolveDynamicComponent } from "vue"
export default {
	components: { navbar },
	data() {
		return {
			token: '',
			userInfo: {},
			imgNetUrl,
			baseUrl,
			avatarUrl: ''
		}
	},
	onLoad() {

	},
	onShow() {
		const token = uni.getStorageSync('token');
		if(token) {
			this.token = token;
			getMemberlist({token}).then(res1 => {
				this.userInfo = res1.data;
				this.avatarUrl = this.userInfo.avatar_url ? this.imgNetUrl + this.userInfo.avatar_url : '';
			})
			console.log('this.userInfo', this.userInfo);
		}else {
			this.token = '';
			this.userInfo = {};
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		cliOutLogin() {
			uni.showModal({
				title: '提示', content: '确定退出当前账号？', confirmColor: '#ba2f28',
				success: res1 => {
					if (res1.confirm) {
						uni.clearStorageSync();
						uni.navigateTo({
							url: '/pages/personalCenter/login?type=1'
						})
					}
				}
			})
		},
		cliBannerImg() {
			let itemUrl = (this.token ?
							this.avatarUrl ? this.avatarUrl : this.baseUrl + 'iconHeadPortrait.png'
							:
							this.baseUrl + 'iconHeadGray.png'),
				urls = [itemUrl],
				current = 0;
			urls.forEach((item, index) => {
				if(itemUrl == item) current = index;
			})
			uni.previewImage({
				current, urls
			})
		},
		bindblur(eee) {
			this.userInfo.nickname = eee.detail.value;
		},
		bindinput(eee) {//输入框的值变化
			this.userInfo.nickname = eee.detail.value;
		},
		subName() {
			console.log(11, this.userInfo.nickname)
			bindAvatarName({
				token: uni.getStorageSync('token'),
				nickname: this.userInfo.nickname
			}).then(res1 => {
				uni.showToast({
					title: '昵称修改成功', duration: 3000
				})
			})
		},
	}
}
</script>
<style>
</style>